<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            
          perspective: 800px;
        }
      .box {
          position: relative;
          margin: 100px auto;
          width: 300px;
          height: 200px;
          transform-style: preserve-3d;
          animation: giao 6s linear infinite;
          
          
      }
      @keyframes giao {
          0% {
              transform: rotateY(0deg);
          }

          100% {
              transform: rotateY(360deg);
          }

      }
      .box div {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      }
      .a {
          transform: translateZ(300px);
      }
      .b {
          transform:  rotateY(60deg) translateZ(300px);
      }
      .c {
          transform:  rotateY(120deg) translateZ(300px);
      }
      .d {
          transform:  rotateY(180deg) translateZ(300px);
      }
      .e {
          transform:  rotateY(240deg) translateZ(300px);
      }
      .f {
          transform:  rotateY(300deg) translateZ(300px);
      }
    </style>
</head>
<body>
    <div class="box">
        <div class="pig"><img src="pig.jpg"></div>
            <div class="a"><img src="dog.jpg"></div>
            <div class="b"><img src="dog.jpg"></div>
            <div class="c"><img src="dog.jpg"></div>
            <div class="d"><img src="dog.jpg"></div>
            <div class="e"><img src="dog.jpg"></div>
            <div class="f"><img src="dog.jpg"></div>
        </div>
    </div>
</body>
</html>